<template>
  <div>
    <div class="outer-box">
      <div class="sort-content all-unit" :style="{height:inHeight+'px'}">
        <div style="margin: 20px 24px 0px 24px;">
          <!-- 新增计量单位 -->
          <div class="individual-opta" style="margin-bottom: 10px;">
            <div class="opta-form">
              <el-form :model="form" :rules="rules" ref="form">
                <el-form-item prop="name">
                  <el-input v-model="form.name" placeholder="单位名称"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-input v-model="form.code" placeholder="单位编码"></el-input>
                </el-form-item>
              </el-form>
              <el-button size="mini" v-hasPermi="['inv:sort:add']" type="primary" @click="submitFrom('form')" v-if="btnChange=='addStatus'">
                确定</el-button>
              <el-button size="mini" v-hasPermi="['inv:sort:edit']" type="success" @click="submitFrom('form',treeNode)"
                v-if="btnChange=='updateStatus'">保存</el-button>
            </div>
          </div>
          <!-- 物料特性数据 -->
          <div class="height-tree individual-tree" :style="{height:(inHeight - 160)+'px'}">
            <el-tree :data="unitTree" :highlight-current="isIndividualHeight" :props="defaultProps" ref="unitTree"
              @node-click="nodeClick" v-loading="loading">
              <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%"
                @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
                <div class="chang-mourse unit-box">
                  <div class="inal-input">
                    <div class="al-dec"></div>
                    <div class="al-name" :ref="`unitCode${node.data.uniqueId}`" :style="{width:codeWidth}">
                      {{node.label}}
                    </div>
                    <div>
                      {{data.code}}
                    </div>

                  </div>
                  <span class="mou-r">
                    <el-link v-hasPermi="['inv:sort:edit']" v-if="data.individualShow" size="mini"
                      style="color: #67c23a;" type="primary" icon="el-icon-edit" @click.stop="updateIndividual(node)">
                    </el-link>
                    <el-link v-hasPermi="['inv:sort:remove']" v-if="data.individualShow" size="mini"
                      style="color: #f56c6c;" type="primary" icon="el-icon-delete" @click.stop="remove(node)">
                    </el-link>
                  </span>
                </div>
              </span>
            </el-tree>
          </div>
        </div>
        <div style="height:40px;"></div>
        <div class="opta-add">
          <el-button type="primary" v-hasPermi="['inv:sort:add']"  icon="el-icon-plus" plain @click="handleAdd">新增</el-button>
          <el-button icon="el-icon-close" plain @click="handleClose">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    addUnit,
    updateUnit,
    delUnit
  } from "../../api/sort"; //接口
  import {
    getCurrentNode,
    setCurrentNode
  } from "../../utils/sort.js" //js方法
  export default {
    data() {
      return {
        loading: false,
        //是否显示编码，修改子特性时不显示
        codeShow: true,
        //按钮状态
        btnChange: "addStatus",
        // 表单
        form: {
          code: "",
          name: "",
          status: "0"
        },
        //树形节点
        treeNode: "",
        // 是否高亮
        isIndividualHeight: false,
        //绑定树形数据名称
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        // 表单校验
        rules: {
          code: [{
            required: true,
            trigger: 'blur'

          }],
          name: [{
            required: true,
            trigger: 'blur'

          }],

        }
      }
    },
    props: ["unitStatus", "inHeight", "unitTree", "codeWidth"],
    mounted() {

    },
    methods: {

      // 特性选中
      nodeClick() {
        this.isIndividualHeight = false;
        this.reset()
      },
      // 新增计量单位
      handleAdd() {
        this.btnChange = 'addStatus';
        this.codeShow = true;
        this.isIndividualHeight = false;
        this.reset();
      },

      // 修改特性
      updateIndividual(node) {
        this.$refs.form.resetFields()
        this.uplateAdd(node);
        this.treeNode = node; //节点赋值，用来确定位置
        this.btnChange = 'updateStatus';
        this.form.uniqueId = node.data.uniqueId;
        this.form.code = node.data.code;
        this.form.name = node.data.name;
        this.form.status = node.data.status;
        this.form.version = node.data.version;
      },


      // 移除特性
      remove(node) {
        this.$confirm('确认删除', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {

          return delUnit(node.data.uniqueId);

        }).then((res) => {
          if (res.code == 200) {
            this.msgSuccess("删除成功");
            this.reset(); //重置表单
            this.isIndividualHeight = false;
            this.butChange = 'addStatus'; //按钮状态为添加
            this.$refs.unitTree.remove(node) //移除节点
          }

        })
      },

      // 修改分类新增分类公共方法
      uplateAdd(node) {
        this.isIndividualHeight = true; // 上级分类高亮
        const getNode = [];
        getCurrentNode(node, getNode).then(currentNode => {
          setCurrentNode(this.$refs.unitTree.root, currentNode)
        })

      },

      //鼠标进入事件
      mouseenter(data) {
        this.$set(data, "individualShow", true);
      },

      //鼠标离开事件
      mouseleave(data) {
        this.$set(data, "individualShow", false);
      },

      //提交表单
      submitFrom(form, node) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            if (this.btnChange == "addStatus") { //触发新增提交
              addUnit(this.form).then(res => {
                if (res.code == 200) {
                  this.msgSuccess("新增成功");
                  this.unitTree.push(res.data)
                  this.reset(); //重置表单
                }
              }).catch(err => {
                this.msgError("新增失败");
              })
            } else if (this.btnChange == "updateStatus") {
              updateUnit(this.form).then(res => { //触发保存提交
                if (res.code == 200) {
                  this.msgSuccess("保存成功");
                  this.form.version = res.data.version
                  node.data.code = this.form.code;
                  node.data.name = this.form.name;
                  node.data.uniqueId = this.form.uniqueId;
                  node.data.status = this.form.status;
                  node.data.version = res.data.version;
                }
              }).catch(err => {
                this.msgError("保存失败");
              })
            }
          }
        });
      },

      //重置
      reset() {
        this.form.uniqueId = "";
        this.form.code = "";
        this.form.name = "";
        this.form.status = "0";
      },

      // 关闭当前
      handleClose() {
        this.$emit("update:unitStatus", false)
      }
    }
  }
</script>

<style lang="scss">
  .outer-box {
    .el-tree-node__content {
      height: inherit;
      border-bottom: 1px solid #dfe6ec;
      padding: 6px;
    }
    .el-tree-node__expand-icon {
      padding: 0;
    }

    .all-unit {
      .el-tree-node__expand-icon.is-leaf {
        display: none;
      }

      .el-tree-node__content {
        padding-left: 6px !important;
      }
    }

    .unit-box {
      .inal-input {
        display: flex;
        align-items: center;

        .al-dec {
          width: 5px;
          height: 5px;
          display: inline-block;
          background: #ccc;
          vertical-align: middle;
          margin-right: 10px;
        }

        .al-name {
          margin-right: 100px;
        }

      }
    }

    .individual-opta {
      display: flex;
      align-items: center;

      .opta-form {
        display: flex;
        align-items: center;

        .el-form {
          display: flex;
          align-items: center;

          .el-form-item {
            margin-right: 10px;
            margin-bottom: 0;
          }
        }

        .el-input {
          font-size: 13px;
        }

        .el-input__inner {
          height: 32px;
          line-height: 32px;
          font-size: 13px;
          border-radius: 4px;
        }

        .el-form-item__content {
          line-height: 32px;
        }
      }
    }

    .sort-content {
      position: relative;

      .opta-add {
        position: absolute;
        bottom: 30px;
        right: 34px;

        button {
          font-size: 13px;
          padding: 8px 12px;
        }
      }
    }

    .individual-tree {
      width: 100%;
    }

    .height-tree {
      overflow: auto;
    }

  }



  .custom-tree-node {
    font-size: 14px;

    a {
      margin-left: 10px;

      &:hover i {
        font-weight: 700;

      }
    }

    .el-link.is-underline:hover:after {
      border: none !important;

    }
  }

  .chang-mourse {
    display: flex;
    justify-content: space-between;

    .mou-r {
      margin-right: 10px;
    }
  }
</style>
